<template>
	<div class="system-menu-container">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-form :inline="true">
					<el-form-item>
						<el-button v-if="permissionStore.isPermissionsBtn('001003001')" size="default" type="success" class="ml10" @click="onOpenAddMenu(null)">
							<el-icon>
								<FolderAdd />
							</el-icon>
							新增主菜单
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table v-loading="loading" :data="menuTableData" style="width: 100%" row-key="menuId"  
				>
				<el-table-column label="菜单名称" show-overflow-tooltip min-width="200">
					<template #default="scope">
						<el-icon v-if="scope.row.icon && scope.row.icon!='#'">
							 <component :is="scope.row.icon" />
						</el-icon>
						<span class="ml10">{{ scope.row.menuName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="编码" prop="menuCode" show-overflow-tooltip min-width="150"></el-table-column>
				<el-table-column label="排序" prop="orderNum" show-overflow-tooltip min-width="80" align="center"></el-table-column>
				<el-table-column label="备注" prop="remark" show-overflow-tooltip min-width="80" align="center"></el-table-column>
				<el-table-column label="类型" show-overflow-tooltip min-width="140" align="center">
					<template #default="scope">
						<el-tag
							:type="scope.row.menuType === 'M' ? 'danger' : (scope.row.menuType === 'C' ? 'success' : 'warning')"
							size="small">{{ scope.row.menuType === 'M' ? '目录' : (scope.row.menuType === 'C' ? '菜单' : '按钮')
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态"  min-min-width="80" align="center" >
						<template #default="scope">
							{{ scope.row.status?'停用':'正常'}}
						</template>
				</el-table-column>
				<el-table-column  label="是否隐藏"  min-width="80" >
						<template #default="scope">
							{{ scope.row.visible?'隐藏':'显示'}}
						</template>
				</el-table-column>
				<el-table-column label="操作" min-width="240" v-if="permissionStore.isPermissionsBtn(['001003002','001003003','001003004'])">
					<template #default="scope">
						<el-button v-if="scope.row.menuType !== 2 && permissionStore.isPermissionsBtn('001003002')" size="small" text type="primary"
							@click="onOpenAddMenu(scope.row)" :disabled ="scope.row.menuType=='F'" >新增</el-button>
						<el-button v-if="permissionStore.isPermissionsBtn('001003003')" size="small"  text type="primary" @click="onOpenEditMenu(scope.row)"
							>修改</el-button>
						<el-button v-if="permissionStore.isPermissionsBtn('001003004')" size="small" text type="danger" @click="onTabelRowDel(scope.row)"
							>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<EditMenu ref="editMenuRef" @menuList="menuList" :menuUrlList="menuUrlList" :visibleOptions="sys_show_hide" :acType="acType" />
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditMenu from './component/editMenu.vue';
import { delMenuApi, treeMenuListApi ,getMenuUrlListApi } from "@/api/auth/menu/index";
import { usePermissionStore } from '@/store/modules/permission'
export default defineComponent({
	name: 'apiV1SystemAuthMenuList',
	components: { EditMenu },
	setup() {
		const editMenuRef = ref();
		const permissionStore = usePermissionStore()
		const state = reactive({
			queryParams: {
				menuName: "",	//菜单名称
				status: null,	//菜单状态（0正常 1停用）
				userId: null
			},
			loading:false,
			menuTableData: [],
			menuUrlList:[]
		});

		const visibleOptions = [{
			label: '显示',
			value: 0
		}, {
			label: '隐藏',
			value: 1
		}
		]

		const statusOptions = [{
			label: '正常',
			value: 0
		}, {
			label: '停用',
			value: 1
		}]
		
		const { proxy } = getCurrentInstance() as any;
		// const {sys_show_hide} = proxy.useDict('sys_show_hide')
		let sys_show_hide = ''
		const acType = ref('add')
		// 打开新增菜单弹窗
		const onOpenAddMenu = (row: any) => {
			acType.value = 'add'
			editMenuRef.value.openDialog(row);
		};
		// 打开编辑菜单弹窗
		const onOpenEditMenu = (row: any) => {
			 const { children, ...rest } = row;
			acType.value = 'edit'
			editMenuRef.value.openDialog(rest);
		};
		// 删除当前行
		const onTabelRowDel = (row: any) => {
			let menuType=row.menuType=='M'?'目录':row.menuType=='C'?'菜单':'按钮'
			ElMessageBox.confirm(`此操作将永久删除${menuType}：“${row.menuName}”, 是否继续?`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					let obj={
						id:row.menuId
					}
					delMenuApi(obj).then(() => {
						ElMessage.success('删除成功');
						proxy.$refs['editMenuRef'].resetMenuSession()
						menuList();
					})
				})
				.catch(() => { });
		};
		onBeforeMount(() => {
			
			menuList()
			getMenuUrlList()
		});
		const handleQuery = () => {
			menuList();
		};
		// 路由树
		const menuList = () => {
			state.loading=true
			treeMenuListApi({}).then((res:any) => {
				if (res?.data) state.menuTableData = res.data
				state.loading=false
			})
		};
		// 接口列表
		const getMenuUrlList=()=>{
			getMenuUrlListApi().then((res:any)=>{
				if (res?.data) state.menuUrlList = res.data
			})
		}

		return {
			editMenuRef,
			visibleOptions,
			statusOptions,
			permissionStore,
			onOpenAddMenu,
			onOpenEditMenu,
			onTabelRowDel,
			menuList,
			handleQuery,
			...toRefs(state),
			sys_show_hide,
			acType
		};
	},
});
</script>
